<template>
  <el-container>
    <el-header height="40px" class="header1">
      <div class="demo-type">
        <el-dropdown>
          <el-avatar icon="el-icon-user-solid" :size="32"></el-avatar>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item>我的订单</el-dropdown-item>
            <el-dropdown-item>我的购物车</el-dropdown-item>
            <el-dropdown-item>设置</el-dropdown-item>
            <el-dropdown-item>退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <a href="../logn.vue" class="plogn">登录</a>
      </div>
    </el-header>
    <el-header height="135px">
      <div class="logoimg">
        <img src="../../assets/img/logo.png">
      </div>
      <div style="margin-top: 30px;" class="box">
        <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option label="教育" value="1"></el-option>
            <el-option label="小说" value="2"></el-option>
            <el-option label="文艺" value="3"></el-option>
            <el-option label="动漫" value="4"></el-option>
            <el-option label="人文" value="5"></el-option>
            <el-option label="科技" value="6"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
      <div style="width: 530px;height: 60px;margin: -20px auto 0;">
          <el-link href="https://element.eleme.io" target="_blank"><a>热搜：</a></el-link>
          <el-link type="primary">狼图腾</el-link>
          <el-link type="success">人生</el-link>
          <el-link type="warning">边城</el-link>
          <el-link type="danger">平凡的世界</el-link>
          <el-link type="info">重返狼群</el-link>
        </div>
        <div style="float:right;margin-right:100px;margin-top:-110px">
            <el-button-group class="button">
              <el-button type="primary" plain style="width:120px;height:50px"><i class="el-icon-shopping-cart-2" ></i>  购物车</el-button>
              <el-button type="primary" plain style="width:120px;height:50px"><i class="el-icon-document-copy" ></i>  我的订单</el-button>
            </el-button-group>
        </div>
    </el-header>
    <el-main>
      <el-container>
        <el-aside width="220px">
          <el-menu :collapse="true" router>
            <el-menu-item index="home/recommend">
              <i style="font-style: unset;">推荐</i>
            </el-menu-item>
              <el-submenu index="2">
                <template slot="title">
                  <i style="font-style: unset;">教育</i>
                </template>
                <el-menu-item-group>
                  <span slot="title">教育</span>
                  <el-menu-item index="2-1">选项1</el-menu-item>
                  <el-menu-item index="2-2">选项2</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">
                  <i style="font-style: unset;">小说</i>
                </template>
                <el-menu-item-group>
                  <span slot="title">小说</span>
                  <el-menu-item index="3-1">选项1</el-menu-item>
                  <el-menu-item index="3-2">选项2</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="4">
                <template slot="title">
                  <i style="font-style: unset;">春春文学</i>
                </template>
                <el-menu-item-group>
                  <span slot="title">春春文学</span>
                  <el-menu-item index="4-1">选项1</el-menu-item>
                  <el-menu-item index="4-2">选项2</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="5">
                <template slot="title">
                  <i style="font-style: unset;">童书</i>
                </template>
                <el-menu-item-group>
                  <span slot="title">童书</span>
                  <el-menu-item index="5-1">选项1</el-menu-item>
                  <el-menu-item index="5-2">选项2</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="6">
                <template slot="title">
                  <i style="font-style: unset;">人文社科</i>
                </template>
                <el-menu-item-group>
                  <span slot="title">人文社科</span>
                  <el-menu-item index="6-1">选项1</el-menu-item>
                  <el-menu-item index="6-2">选项2</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="7">
                <template slot="title">
                  <i style="font-style: unset;">经管</i>
                </template>
                <el-menu-item-group>
                  <span slot="title">经管</span>
                  <el-menu-item index="7-1">选项1</el-menu-item>
                  <el-menu-item index="7-2">选项2</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="8">
                <template slot="title">
                  <i style="font-style: unset;">成功/励志</i>
                </template>
                <el-menu-item-group>
                  <span slot="title">成功/励志</span>
                  <el-menu-item index="8-1">选项1</el-menu-item>
                  <el-menu-item index="8-2">选项2</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="9">
                <template slot="title">
                  <i style="font-style: unset;">科技</i>
                </template>
                <el-menu-item-group>
                  <span slot="title">科技</span>
                  <el-menu-item index="9-1">选项1</el-menu-item>
                  <el-menu-item index="9-2">选项2</el-menu-item>
                </el-menu-item-group>
                </el-submenu>
                <el-submenu index="10">
                <template slot="title">
                  <i style="font-style: unset;">英文原版</i>
                </template>
                <el-menu-item-group>
                  <span slot="title">英文原版</span>
                  <el-menu-item index="10-1">选项1</el-menu-item>
                  <el-menu-item index="10-2">选项2</el-menu-item>
                </el-menu-item-group>
                </el-submenu>
                <el-submenu index="11">
                <template slot="title">
                  <i style="font-style: unset;">期刊/音像</i>
                </template>
                <el-menu-item-group>
                  <span slot="title">期刊/音像</span>
                  <el-menu-item index="11-1">选项1</el-menu-item>
                  <el-menu-item index="11-2">选项2</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="12">
                <template slot="title">
                  <i style="font-style: unset;">DD出版</i>
                </template>
                <el-menu-item-group>
                  <span slot="title">DD出版</span>
                  <el-menu-item index="12-1">选项1</el-menu-item>
                  <el-menu-item index="12-2">选项2</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="13">
                <template slot="title">
                  <i style="font-style: unset;">创意文具</i>
                </template>
                <el-menu-item-group>
                  <span slot="title">创意文具/</span>
                  <el-menu-item index="13-1">选项1</el-menu-item>
                  <el-menu-item index="13-2">选项2</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
          </el-menu>
        </el-aside>
        <div style="padding: 0 0 0 18px;">
          <router-view></router-view>
        </div>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data () {
    return {
      input: '',
      select: '',
      options: [{
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'fankui',
            label: '反馈'
          }, {
            value: 'xiaolv',
            label: '效率'
          }, {
            value: 'kekong',
            label: '可控'
          }]
        }, {
          value: 'daohang',
          label: '导航',
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航'
          }, {
            value: 'dingbudaohang',
            label: '顶部导航'
          }]
        }]
      }, {
        value: 'zujian',
        label: '组件',
        children: [{
          value: 'basic',
          label: 'Basic',
          children: [{
            value: 'layout',
            label: 'Layout 布局'
          }, {
            value: 'color',
            label: 'Color 色彩'
          }, {
            value: 'typography',
            label: 'Typography 字体'
          }, {
            value: 'icon',
            label: 'Icon 图标'
          }, {
            value: 'button',
            label: 'Button 按钮'
          }]
        }, {
          value: 'form',
          label: 'Form',
          children: [{
            value: 'radio',
            label: 'Radio 单选框'
          }, {
            value: 'checkbox',
            label: 'Checkbox 多选框'
          }, {
            value: 'input',
            label: 'Input 输入框'
          }, {
            value: 'input-number',
            label: 'InputNumber 计数器'
          }, {
            value: 'select',
            label: 'Select 选择器'
          }, {
            value: 'cascader',
            label: 'Cascader 级联选择器'
          }, {
            value: 'switch',
            label: 'Switch 开关'
          }, {
            value: 'slider',
            label: 'Slider 滑块'
          }, {
            value: 'time-picker',
            label: 'TimePicker 时间选择器'
          }, {
            value: 'date-picker',
            label: 'DatePicker 日期选择器'
          }, {
            value: 'datetime-picker',
            label: 'DateTimePicker 日期时间选择器'
          }, {
            value: 'upload',
            label: 'Upload 上传'
          }, {
            value: 'rate',
            label: 'Rate 评分'
          }, {
            value: 'form',
            label: 'Form 表单'
          }]
        }, {
          value: 'data',
          label: 'Data',
          children: [{
            value: 'table',
            label: 'Table 表格'
          }, {
            value: 'tag',
            label: 'Tag 标签'
          }, {
            value: 'progress',
            label: 'Progress 进度条'
          }, {
            value: 'tree',
            label: 'Tree 树形控件'
          }, {
            value: 'pagination',
            label: 'Pagination 分页'
          }, {
            value: 'badge',
            label: 'Badge 标记'
          }]
        }, {
          value: 'notice',
          label: 'Notice',
          children: [{
            value: 'alert',
            label: 'Alert 警告'
          }, {
            value: 'loading',
            label: 'Loading 加载'
          }, {
            value: 'message',
            label: 'Message 消息提示'
          }, {
            value: 'message-box',
            label: 'MessageBox 弹框'
          }, {
            value: 'notification',
            label: 'Notification 通知'
          }]
        }, {
          value: 'navigation',
          label: 'Navigation',
          children: [{
            value: 'menu',
            label: 'NavMenu 导航菜单'
          }, {
            value: 'tabs',
            label: 'Tabs 标签页'
          }, {
            value: 'breadcrumb',
            label: 'Breadcrumb 面包屑'
          }, {
            value: 'dropdown',
            label: 'Dropdown 下拉菜单'
          }, {
            value: 'steps',
            label: 'Steps 步骤条'
          }]
        }, {
          value: 'others',
          label: 'Others',
          children: [{
            value: 'dialog',
            label: 'Dialog 对话框'
          }, {
            value: 'tooltip',
            label: 'Tooltip 文字提示'
          }, {
            value: 'popover',
            label: 'Popover 弹出框'
          }, {
            value: 'card',
            label: 'Card 卡片'
          }, {
            value: 'carousel',
            label: 'Carousel 走马灯'
          }, {
            value: 'collapse',
            label: 'Collapse 折叠面板'
          }]
        }]
      }, {
        value: 'ziyuan',
        label: '资源',
        children: [{
          value: 'axure',
          label: 'Axure Components'
        }, {
          value: 'sketch',
          label: 'Sketch Templates'
        }, {
          value: 'jiaohu',
          label: '组件交互文档'
        }]
      }]
    }
  }
}
</script>

<style>
.plogn {
  position: absolute;
  right: 18px;
  top: 20px;
  line-height: 5px;
  font-size: 14px;
  text-decoration: none;
  color: white;
}
.demo-type {
  text-align: right;
}
.el-avatar {
  font-size: 20px;
  margin-right:35px;
  margin-top: -2px;
  display: inline-block;
}
.el-dropdown {
  height: 25px;
  margin-top: 2px;
}
.el-dropdown-menu {
  margin-left: -20px;
}
.logoimg {
  float: left;
  margin-top: 10px;
  margin-left:20px
}
.el-select {
    width: 130px;
  }
.input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

.el-header {
  background-color: white;
  text-align: center;
  line-height: 60px;
}
.header1 {
  background-image: url("../../assets/img/backgroundMain.jpg");
}
.box {
  width: 530px;
  margin: 0 auto;
}
.el-link--inner {
  opacity: 0.7;
  line-height: 15px;
  padding: 0 5px;
  font-size: 12px;
}
.el-aside {
  text-align: center;
  line-height: 200px;
}
.el-main {
  /* background-color: #000000; */
  background-image: url("../../assets/img/backgroundMain.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;

}
.el-menu--collapse {
  width: 100%;
  box-sizing: border-box;
}
.button * {
  vertical-align: top;
  line-height: 30px;
}
.button i {
  font-size: 26px;
}
</style>
